<template>
    <!-- plugin/components/diy-navigate/diy-navigate.wxml -->
    <view
        :style="
            'margin-top: ' +
            componentData.data.marginTop * 2 +
            'rpx;margin-bottom: ' +
            componentData.data.marginBottom * 2 +
            'rpx; padding: 0 ' +
            componentData.data.marginLeftRight * 2 +
            'rpx;'
        "
    >
        <view
            class="content"
            :style="
                'background-color: ' +
                componentData.data.bgColor +
                ';padding: ' +
                componentData.data.paddingTopBottom * 2 +
                'rpx ' +
                componentData.data.paddingLeftRight * 2 +
                'rpx;'
            "
        >
            <view class="content-line" v-for="(item, index) in navList" :key="index">
                <view class="nav-item" v-for="(nav, indexs) in item" :key="indexs">
                    <diy-navigator :url="nav.page.url" @callback="callback">
                        <image v-if="nav" :src="nav.icon" :style="'border-radius:' + (componentData.data.borderRadius || 0) + '%;width:80rpx;height:80rpx;'"></image>
                        <view
                            v-if="nav"
                            class="nav-item-text"
                            :style="
                                'color: ' +
                                componentData.data.fontColor +
                                ';margin-top: ' +
                                componentData.data.textMarginTop * 2 +
                                'rpx;font-size: ' +
                                componentData.data.textFontSize * 2 +
                                'rpx;font-weight: ' +
                                componentData.data.textFontWeight +
                                ';'
                            "
                        >
                            {{ nav.text }}
                        </view>
                    </diy-navigator>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import diyNavigator from '../diy-navigator/diy-navigator';
// plugin/components/diy-navigate/diy-navigate.js
export default {
    components: {
        diyNavigator
    },
    data() {
        return {
            navList: [],

            nav: {
                page: {
                    url: ''
                },

                icon: '',
                text: ''
            }
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        componentData: {
            type: Object
        }
    },
    watch: {
        componentData: {
            handler: function (e) {
                this.changeDraw();
            },

            immediate: true,
            deep: true
        }
    },
    beforeMount() {},
    mounted() {
		
        this.changeDraw();
    },
    /**
     * 组件的方法列表
     */
    methods: {
        callback(e) {
            const myEventDetail = { ...e.detail }; // console.log('diy-img-callback',e,myEventDetail);

            this.$emit('callback', {
                detail: myEventDetail
            });
        },

        changeDraw() {
            let len = this.componentData.data.fileList.length;
            let n = this.componentData.data.num;
            let lineNum = len % n === 0 ? len / n : Math.floor(len / n + 1);
            let res = [];

            for (let i = 0; i < lineNum; i++) {
                let temp = this.componentData.data.fileList.slice(i * n, i * n + n);
                res.push(temp);
            } // this.navList = res
			console.log(res,"diy-navigate");
            this.setData({
                navList: res
            });
            let arr = this.navList;
            arr[this.navList.length - 1].length = this.componentData.data.num;
            this.setData({
                navList: arr
            }); // this.data.navList[this.data.navList.length - 1].length = this.data.componentData.data.num
        }
    }
};
</script>
<style>
@import './diy-navigate.css';
</style>
<style lang="scss" scoped>
	/* #ifdef MP-ALIPAY */
	.content {
		flex-wrap: wrap;
	}
	.content-line {
		width: 100%;
	}
	
	/* #endif */
</style>
